<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文档新增</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport"/>
    <meta name="_csrf" content="2a049f84-561c-44bf-ae25-f24fbf78b313">
    <meta name="_csrf_header" content="X-CSRF-TOKEN">
    <script src="/wedding_admin/js/common.js"></script>
    <script src="/wedding_admin/js/jquery.min.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.all.min.js"></script>
    <script src="/wedding_admin/js/jszip.min.js"></script>
    <script src="/wedding_admin/js/um/respond.min.js"></script>
    <script src="/wedding_admin/js/um/es5-shim.min.js"></script>

    <script src="/wedding_admin/js/kendo/kendo.culture.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.messages.zh-CN.js"></script>
    <script src="/wedding_admin/js/kendo/kendo.hap.js?v=20180330"></script>
    <script src="/wedding_admin/js/um/moment.min.js"></script>
    <script src="/wedding_admin/js/um/daterangepicker.js"></script>
    <script src="/wedding_admin/js/layui/lay/dest/layui.all.js"></script>

    <script src="/wedding_admin/js/vue_table/vue.min.js"></script>
    <script src="/wedding_admin/js/vue_table/vue-validator.min.js"></script>

    <script src="/wedding_admin/js/treegrid/tree.table.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.extension.js"></script>
    <script src="/wedding_admin/js/treegrid/jquery.treegrid.min.js"></script>
    <script src="/wedding_admin/js/ztree/jquery.ztree.all.min.js"></script>

    <link href="/wedding_admin/statics/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/statics/css/simple-line-icons.min.css" rel="stylesheet" type="text/css">
    <link href="/wedding_admin/css/ztree/css/metroStyle/metroStyle.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.common-bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.bootstrap.min.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/kendo.hap.css" rel="stylesheet" type="text/css"/>
    <link href="/wedding_admin/css/um/daterangepicker.css" rel="stylesheet">


    <link href="/wedding_admin/statics/js/layui/css/layui.css" rel="stylesheet" type="text/css">

    <!--编辑器-->
    <link href="/wedding_admin/css/wangeditor.css" rel="stylesheet">
    <script src="/wedding_admin/js/wangeditor.js"></script>


</head>
<style>
    .card-wrap {
        background-color: #fff;
        margin-bottom: 16px;
        padding: 16px;
        box-shadow: 0 3px 6px 0 rgb(0 0 0 / 12%);
        border-radius: 4px;
        height: 400px;
    }

    .row {
        margin-right: -15px;
        margin-left: -15px;
    }

    .card {

        background: #fff;
        margin: 15px 0px 15px 0px;
        padding: 15px;
        border: 0px;
        border-radius: 0px;
        box-shadow: 0 3px 6px 0 rgb(0 0 0 / 12%);
    }

    .stat-widget-one {
        overflow: hidden;
    }

    .stat-widget-one .stat-icon {
        vertical-align: top;
        float: left;
    }

    .dib {
        display: inline-block;
    }

    .stat-widget-one .stat-icon i {
        font-size: 10px;
        border-width: 3px;
        border-style: solid;
        border-radius: 100px;
        padding: 15px;
        font-weight: 900;
        display: inline-block;
    }

    .border-success {
        border-color: #41c300;
    }

    .color-success {
        color: #41c300;
    }

    .stat-content {
        margin-left: 1cm;
    }

</style>
<style>
    #container {
        margin: 0 10px;
        border: 1px solid #ccc;
    }


    #toolbar-container {
        border-botton: 1px solid #ccc;
    }


    #editor-container {
        height: 500px
    }


</style>

<body>
<div class="panel panel-default" id="rrapp">


    <div class="col-12 cards-wrap">
        <div class="row center-xs card-items-wrap" style="">
            <!--2.6-->
            <div class="col-xl-12 col-lg-12 card-item">
                <form class="form-horizontal">
                    <div class="stat-widget-one">
                        <div class="stat-icon dib"><i class="ti-money color-success border-success"><i
                                class="fa fa-map-o"
                                aria-hidden="true"></i></i>
                        </div>
                        <div class="stat-content dib" style="width: 400px">
                            <input type="text" id="headline"
                                   lay-verify="title"
                                   autocomplete="off"
                                   placeholder="请输入标题"
                                   class="layui-input"
                                   style="position: absolute;top: 0;bottom: 0;margin: auto 0;width: 400px">

                        </div>

                        <div class="stat-content dib" style="width: 100px">
                            <a id="queryInfo" class="btn btn-success"
                               style="position: absolute;top: 25px;margin: auto 0;width: 100px"
                               onclick="saveList()"
                            >保存</a>

                        </div>
                        <div class="stat-content dib" style="width: 100px">
                            <a id="add" class="btn btn-success"
                               style="position: absolute;top: 25px;margin: auto 0;width: 100px"

                            ><i class="fa fa-plus-square" style="margin-right:3px;"></i>添加</a>

                        </div>


                    </div>
                </form>
            </div>


        </div>
    </div>
    <div class="col-12 cards-wrap">
        <div class="row center-xs card-items-wrap" style="">
            <!--2.6-->
            <div class="col-xl-12 col-lg-12 card-item">
                <div id="container">
                    <div id="toolbar-container"></div>
                    <div id="editor-container"></div>
                </div>

            </div>


        </div>
    </div>
</div>

</body>
<script>

    //var E = window.wangEditor; // 全局变量
    const {createEditor, createToolbar} = window.wangEditor
    // 编辑器配置
    const editorConfig = {MENU_CONF: {}}
    editorConfig.placeholder = '请输入内容'
    editorConfig.onChange = (editor) => {
        // 当编辑器选区、内容变化时，即触发
        console.log('content', editor.children)
        console.log('html', editor.getHtml())
    }
    editorConfig.MENU_CONF['uploadImage'] = {
        server: 'http://localhost:9001/wedding_admin/sys/sysdict/wangEditoraddImg', // 上传图片地址

        timeout: 5 * 1000, // 5s

        fieldName: 'file',//后台参数地址
        //   meta: { token: 'xxx', a: 100 },
        // metaWithUrl: true, // 参数拼接到 url 上
        //  headers: { Accept: 'text/x-json' },

        //  maxFileSize: 10 * 1024 * 1024, // 10M

        // base64LimitSize: 6 * 1024, // 5kb 以下插入 base64

        onBeforeUpload(files) {
            console.log('onBeforeUpload', files)
            return files // 返回哪些文件可以上传
            // return false 会阻止上传
        },
        onProgress(progress) {
            console.log('onProgress', progress)
        },
        onSuccess(file, res) {
            console.log('onSuccess', file, res)
        },
        onFailed(file, res) {
            alert(res.message)
            console.log('onFailed', file, res)
        },
        onError(file, err, res) {
            alert(err.message)
            console.error('onError', file, err, res)
        },


    }
    // 工具栏配置
    const toolbarConfig = {}
    // 创建编辑器
    const editor = createEditor({
        selector: '#editor-container',
        config: editorConfig,
        mode: 'simple' // 或 'simple 简单模式/default 默认' 参考下文
    })

    // 创建工具栏
    const toolbar = createToolbar({
        editor,
        selector: '#toolbar-container',
        config: toolbarConfig,
        mode: 'simple' // 或 'simple 简单模式/default 默认' 参考下文
    })

    /**
     * 保存
     */
    function saveList() {

        var headline = document.getElementById("headline").value;
        if (headline == "" || headline == undefined) {
            alert("标题不能为空")
            return
        }

        $.ajax({
            url: "/wedding_admin/sys/sysdocument/save",
            type: "post",
            dataType: "json",
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify({
                "parentId": GetQueryString("dbgyId"),
                "headline": headline,
                "content": editor.getHtml()
            }),
            success: function (data) {

                if (data.code == 0) {
                    window.location.href = `../sys_documents_query.html?documentId=${JSON.stringify(data.documentId)}`;


                } else {
                    alert(data.msg);
                }

            },
            error: function (msg) {
                alert("连接异常：" + msg);
            }

        })
    }

    function GetQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
</script>
<script>


</script>
</html>
